<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="com.lavegue.service.ArticleService"%>
<%@page import="com.lavegue.util.MyBeanFactory"%>
<%@page import="com.lavegue.model.Article"%>
<%@page import="com.lavegue.model.Area" %>
<%@page import="com.lavegue.webaction.ArticleManagerAction"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
ArticleService service=(ArticleService)MyBeanFactory.getBean("articleService");
Article article=service.findById(ArticleManagerAction.KEHU_XIEYI);
%>
<head>
    <title>用户注册</title>
    <base href="<%=basePath%>" />
    <meta http-equiv="Cache-Control" content="max-age=0" />

<script type='text/javascript' src='dwr/interface/userdwr.js'></script>
 <script type='text/javascript' src='dwr/interface/areadwr.js'></script>
<script type="text/javascript" src="<s:url value="/js/jquery-1.4.2.min.js"/>"></script>
 <script type='text/javascript' src='js/jquery.validate.min.js'></script>
 <script type='text/javascript' src='js/common.js'></script>
  <script type='text/javascript' src='<%=basePath %>/dwr/engine.js'></script>
 <script type='text/javascript' src='<%=basePath %>/dwr/util.js'></script>
<link href="images/css.css"  rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.STYLE10 {
	font-size: 14px;
	font-weight: bold;
}
.STYLE11 {
	font-size: 12px;
	font-weight: bold;
}
-->
</style>

<!-- 效验数据 -->
<script type="text/javascript">

	var numflag = false;  //标识用户号码是否存在
	var user_num="";
//DWR - 获取后台效验用户号码是否存在
function checkUserName(userNumNo){
	dwr.engine.setAsync(false);   //ajax設置同步调用
//	alert("輸入名="+username);
	//调用java后台方法checkUserName()
	userdwr.checkUserMobile(userNumNo,function(data){
	//alert("data=>>>>>"+data);
		if(data != ""){
			//numflag = true; //表示号码存在
			user_num=data;
		//	alert("if user_num="+user_num);
		}else{
			user_num="";
			//alert("else>>user_num="+user_num);
			//nameflag = false; //表示号码不存在
		}
	}
	);
} 

function checkValid(){
		var account=$.trim($("#account").val());    //号码
		var passwd = $.trim($("#password").val());  //密码
		var confirmPassword = $.trim($("#inputPwd").val());     //确认密码
		  
		var pwd_qst =$.trim($("#pwd_question").val()); //密码查询问题
		var pwd_answer= $.trim($("#pwd_answer").val()); //密码查询答案 
		var userName = $.trim($("#user_name").val());   //真实姓名

		var company=$.trim($("#company").val());  //所属公司
		
		var province=$.trim($("#province").val());  //省份
		var city=$.trim($("#city").val());  //市区
		var area=$.trim($("#area").val());  //县镇
		
		var scode=$.trim($("#securityCode").val());  //生成的验证码
		if(account == ""){
			$("#mobileSpan").html("");
			$("#mobileSpan").html("&nbsp;&nbsp;请输入你的手机号码.");
			$("#account").focus();
			return false;
		}else{
			//----以下是效验手机号码
			if(!isValidMobile(account)){
				$("#mobileSpan").html("&nbsp;&nbsp;输入的手机号码有误.");
				$("#account").select();
				return false;
			}else{
				$("#mobileSpan").html("");
			}
		
		}

		if(passwd==""){  //效验密码
			$("#passwordSpan").html("");
			$("#passwordSpan").html("请输入你的密码.");
			$("#password").focus();
			return false;
		}else{
			if(passwd.length < 6){
				$("#passwordSpan").html("输入的密码有误.");
				$("#password").focus();
				return false;
			}else{
				$("#passwordSpan").html("");
			}
		}
		if(confirmPassword==""){   //效验确认密码
			$("#pwdSpan").html("");
			$("#pwdSpan").html("请输入您的确认密码.");
			$("#inputPwd").focus();
			return false;
		}else{
			//效验密码和确认密码的正确性
			if(passwd != confirmPassword){
				$("#pwdSpan").html("");
				$("#pwdSpan").html("输入的确认密码不一致.");
				$("#inputPwd").focus();
				return false;
			}else{
				$("#pwdSpan").html("");
			}
		}
		
		if(pwd_qst==""){  //效验查询问题
			$("#questionSpan").html("");
			$("#questionSpan").html("请选择密码查询问题.");
			//$("#questionSpan").focus();
			return false;
		}else{
			$("#questionSpan").html("");
		}
		if(pwd_answer==""){ //效验查询答
			$("#answerSpan").html("");
			$("#answerSpan").html("请输入密码查询答案.");
			$("#answerSpan").focus();
			return false;
		}else{
			if(isIllegalChar(pwd_answer)){
				$("#answerSpan").html("&nbsp;输入的查询答案包含了非法字符.");
				$("#pwd_answer").select();
				return false;
			}else{
				$("#answerSpan").html("");
			}
		}
		
		if(userName==""){  //效验姓名
	    	$("#truenameSpan").html("请输入真实姓名.");
			$("#user_name").focus();
			return false;
		}else{
			if(userName !="" && userName.length > 0){
			   		//----以下是效验真实姓名是否是中文
					if(isIllegalChar(userName)){
						$("#truenameSpan").html("&nbsp;姓名包含了非法字符.");
						$("#user_name").select();
						return false;
					}
			 }else{
			 	$("#truenameSpan").html("");
			 }
			 $("#truenameSpan").html("");
		}
		if(company==""){  //效验公司
			$("#companySpan").html("&nbsp;请选择所属公司.");
			$("#company").focus();
			return false;
		}else{
			$("#companySpan").html("");
		}
		
		if(province == 0){
			$("#areaSpan").html("请选择所在地区");
			return false;
		}else{
			$("#areaSpan").html("");
			$("#userProvince").val(province);
		}
		
		if(city !=0 ){
			$("#userCity").val(city);
		}
		if(area != 0){
			$("#userZone").val(area);
		}
		
		if(scode == ""){  //效验验证码
			$("#codeSpan").html("");
			$("#codeSpan").html("请输入验证码.");
			$("#securityCode").focus();
			return false;
		}else {
			var vcode = $("#vcode").val(); //后台生成的验证码
		//	alert("验证码vcode="+vcode);
			//------------以下是效验验证码的正确性
			 if(isNaN(scode) || scode.length != 4 || scode != vcode){
					$("#codeSpan").html("&nbsp;输入的验证码有误.");
					$("#securityCode").select();
					return false;
			}else{
				$("#codeSpan").html("");
			}
		}
		return true;
}
//表单提交
function doUserSubmit(){
	if(!checkValid()){
	    return false;
	}else{
		//表单提交
	    $("#regFrm").submit();
		//return true;
	}
}


//DWR - 获取后台生成的验证码
function checkVerCode(){
		//调用java后台UserInfoServiceImpl类方法getSecurityCode()
		userdwr.getSecurityCode(function(data) {
		//	alert("data==="+data);
		//	var verifyCode = $.trim($("#securityCode").val());  //输入框的验证码
			$("#vcode").val(data);//给隐藏域设置值
				
		});
}

//省份按钮事件
function changeProvinceHandler() {
	//获取省份下拉框的值
	var province = $("#province").val();
	//如果选择了"请选择这个项" (0表示选择了这个项)
	if (province == 0) {
		//删除市下拉的全部选项
		DWRUtil.removeAllOptions("city");
		DWRUtil.addOptions("city", [{"id":0,"name":"请选择..." }], "id", "name");
		DWRUtil.removeAllOptions("area");
		DWRUtil.addOptions("area", [{"id":0,"name":"请选择" }], "id", "name");
		return;
	} 
		//alert("省ID="+province);
	//删除市下拉的全部选项
	DWRUtil.removeAllOptions("city");
	//根据所选择的省从后台获取相关的市
	areadwr.findAreaByParendIdAndlvType(province, <%= Area.AreaType.CITY%>, function(data){
	DWRUtil.addOptions("city", [{"id":0,"name":"请选择..." }], "id", "name");
	DWRUtil.addOptions("city", data, "id", "name"); //把data数据填充到城市下拉框
	DWRUtil.removeAllOptions("area"); //清除区域的初始值
	DWRUtil.addOptions("area", [{"id":0,"name":"请选择" }], "id", "name");
	});
}

//城市按钮事件
function changeCityHandler() {
	var city = $("#city").val();
	//如果选择了"请选择这个项"
	if (city == 0) {
		//删除区下拉的全部选项
		DWRUtil.removeAllOptions("area");
		DWRUtil.addOptions("area", [{"id":0,"name":"请选择..." }], "id", "name");
		return;
	} 
				
	//删除市下拉的全部选项
	DWRUtil.removeAllOptions("area");
	//根据所选择的市从后台获取相关的区
	areadwr.findAreaByParendIdAndlvType(city, <%= Area.AreaType.AREA%>, function(data) {
	DWRUtil.addOptions("area", [{"id":0,"name":"请选择..." }], "id", "name");
	DWRUtil.addOptions("area", data, "id", "name"); //把data数据填充到城市下拉框
	});
}

function isZiMu_Num(str) {
	//var voidChar = /[@#\$%\^&\*]+/g;
	var voidChar = /^[A-Za-z0-9_]+$/g;
	
	return voidChar.test(str);
}

/**
 * 判断是不是有效的手机号码
 * 格式正确返回true,否则false.
 */
function isValidMobile(mobile) {
    //var pattern = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
    var pattern = /^((13[0-9]{1}|15[0-9]{1}|18[0-9]{1}|)+\d{8})$/;   
    return pattern.test(mobile);
}

/**
 * 判断是不是有效的汉字
 */
function checkIsChinese(str) {
    //正则表达式
    var pattern = /[^\u4E00-\u9FA5]/g;
    if (pattern.test(str)) {
        return false;
    }
    return true;
}
/**
 * 验证输入的字符是否包含@#$%^&*:|+)(!~=}{;?>`<'非法字符
 * 如果返回true为包含,false不包含非法字符
 */	
function isIllegalChar(str) {
	var voidChar = /[@#\$%\^&\*\+\?:|.!~=>`<]+/g;
	return voidChar.test(str);
}

</script>

</head>
  <%----20120131顶部--%>
  <s:action name="showTopReg" executeResult="true"/>

<body onload="checkVerCode();">

    <form action="userRegister!doUserReg.action" name="regFrm" id ="regFrm" method="post">

<table width="796" height="623" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
  <tr>
    <td width="796" height="26" align="left" valign="top"><span class="STYLE1">&nbsp;首页 &gt; 用户注册</span></td>
  </tr>
  <tr>
    <td height="597" align="center" valign="top" bgcolor="#FFFFFF" style="border:1px solid #C5C5C5; padding:1px ;"><table width="100%" height="32" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="1%" height="32" background="images/sp_bg.jpg">&nbsp;</td>
        <td width="3%" align="center" background="images/sp_bg.jpg" style="border-bottom:1px solid #C5C5C5;"><img src="images/dian.jpg" width="10" height="16" /></td>
        <td width="95%" align="left" background="images/sp_bg.jpg" style="border-bottom:1px solid #C5C5C5;">
        <span class="STYLE3">用户注册</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <%-- <span id="showErrInfo" style="color:red"><s:property value="ActionError" /></span>--%>
        </td>
        <td width="1%" background="images/sp_bg.jpg">&nbsp;</td>
      </tr>
    </table>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="8">&nbsp;</td>
          </tr>
        </table>
      <table width="656" height="21" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="319" height="21" align="center" bgcolor="#F6AD47" class="STYLE4">1.填写注册信息</td>
            <td width="16"><img src="images/H_1.jpg" width="16" height="21" /></td>
            <td width="321" align="center" bgcolor="#DEDEDE" class="STYLE4">2.注册成功</td>
          </tr>
        </table>
      <table width="649" height="229" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="18" colspan="3" align="center">&nbsp;</td>
        </tr>
          <tr>
            <td height="165" colspan="3" align="left" class="STYLE5">
            <table width="640" height="414" border="0" cellpadding="0" cellspacing="0">
              <tr>
                  <td width="86" height="36" align="right">登录账号： </td>
                <td width="554" align="left">
                <input name="user.account" id="account" on type="text" size="20" maxlength="11" style="border:1px solid #DBDBDB; height:20px;"  />
                <span class="STYLE6">* </span>
                <span class="STYLE12">请慎重输入你的手机号码，信息录入后将无法更改</span>
                </td>
              </tr>
              <tr>
                  <td width="86" height="14" align="right">&nbsp;</td>
                  <td width="554" align="left" valign="top">登录账户是手机号码
                 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 	<span style="color:red"  id="mobileSpan"></span>
                 	<span style="color:red"><s:property value="ActionError"/></span>
                  </td>
              </tr>
                <tr>
                  <td height="35" align="right">登录密码：</td>
                  <td><input name="user.password" id="password" type="password" size="22"  maxlength="16" style="border:1px solid #DBDBDB; height:20px;"  />
                  <span class="STYLE6">*</span>
                  <span style="color:red"  id="passwordSpan"></span>
                  </td>
              </tr>
              <tr>
                  <td width="86" height="14" align="right">&nbsp;</td>
                <td width="554" align="left" valign="top">6-16位字符（字母、数字、符号），区分大小写</td>
              </tr>
                <tr>
                  <td height="30" align="right">确认密码：</td>
                  <td align="left">
                  <input name="inputPwd" id="inputPwd" type="password" size="22" maxlength="20" style="border:1px solid #DBDBDB; height:20px;"  />
                  <span class="STYLE6">*</span>
                  <span style="color:red"  id="pwdSpan"></span>
                  </td>
                </tr>
                <tr>
                  <td height="34" align="right">密码查询问题：</td>
                  <td align="left">
                  <select name="user.pwdQuestion" id="pwd_question" style="width:152px;">
                  		<option value="">请选择...</option>
                  		<option value="我手机号码的后6位?">我手机号码的后6位？</option>
                  		<option value="我母亲的生日?">我母亲的生日？</option>
                  		<option value="我父亲的生日?">我父亲的生日？</option>
                  		<option value="我最好朋友的生日?">我最好朋友的生日？</option>
                  		<option value="我儿时居住地的地址?">我儿时居住地的地址？</option>
                  		<option value="我小学校名全称?">我小学校名全称？</option>
                  		<option value="离我家最近的医院全称?">离我家最近的医院全称？</option>
                  		<option value="离我家最近的公园全称?">离我家最近的公园全称？</option>
                  		<option value="我的座右铭是?">我的座右铭是？</option>
                  		<option value="我最喜爱的电影?">我最喜爱的电影？</option>
                  		<option value="我最喜爱的歌曲?">我最喜爱的歌曲？</option>
                  		<option value="我最喜爱的食物?">我最喜爱的食物？</option>
                  		<option value="我最大的爱好?">我最大的爱好？</option>
                  		<option value="我最喜欢的小说?">我最喜欢的小说？</option>
                  		<option value="我最喜欢的运动队?">我最喜欢的运动队？</option>
                  </select>
                  <span class="STYLE6">*</span>
                  <span style="color:red"  id="questionSpan"></span>
                  </td>
                </tr>
                <tr>
                  <td height="34" align="right">密码查询答案：</td>
                  <td align="left">
                  <input name="user.pwdAnswer" id="pwd_answer" type="text" size="20" style="border:1px solid #DBDBDB; height:20px;"  />
                  <span class="STYLE6">*</span>
                  <span style="color:red"  id="answerSpan"></span>
                  </td>
                </tr>
                <tr>
                  <td width="86" height="14" align="right">&nbsp;</td>
                <td width="554" align="left" valign="top">6-80个字符，不允许特殊字符和全角字符、空格不能在首尾、下划张不能在最后、汉字算两位</td>
              </tr>
                <tr>
                  <td height="34" align="right">姓名：</td>
                  <td align="left">
                    <input name="user.userName" id="user_name" type="text" size="20" style="border:1px solid #DBDBDB; height:20px;"  />
                    <span class="STYLE6">*</span> 
                    <span class="STYLE12">请输入您的真实姓名，信息录入后将无法更改</span>
                    &nbsp;&nbsp;&nbsp;<span style="color:red"  id="truenameSpan"></span>
                  </td>
              </tr>
                <tr>
                  <td height="34" align="right">所属公司：</td>
                  <td align="left">
                  <select name="user.company.id" id="company" style="width:152px;">
                  	  <option value="">请选择...</option>
	                  <s:iterator id="companys" value="companyList" status="st">
						<option value="<s:property value="id" />"><s:property value="companyName" /></option>
					  </s:iterator>
                  </select>
                  
                  <span class="STYLE6">*</span>
                  <span class="STYLE12">请选择您的所属公司，信息录入后将无法列改</span>
                  &nbsp;&nbsp;&nbsp;<span style="color:red"  id="companySpan"></span>
                  </td>
              </tr>
                <tr>
                  <td height="34" align="right">所在地区：</td>
                  <td align="left">
             <%--     <select name="province" id="province3" class="input"><option value="">请选择...</option>
                  </select>&nbsp;省 
            	  <select name="city" id="city3" class="input"><option value="">请选择...</option>
            	  </select>&nbsp;市 
            	  <select name="area" id="area3" class="input"><option value="">请选择...</option>
            	  </select>&nbsp;县
             	  --%>
           		<s:hidden id="userProvince" name="user.province" value="" ></s:hidden>
           		<s:hidden id="userCity" name="user.city" value="" ></s:hidden>
           		<s:hidden id="userZone" name="user.zone" value="" ></s:hidden>
				<s:select name="province" onchange="changeProvinceHandler();" id="province" list="provinces" headerKey="0" style="width:18%;" headerValue="请选择..." listValue="name" listKey="id"></s:select>
				省
				<s:select list="#{0:'请选择...'}" id="city" name="city" onchange="changeCityHandler();" style="width:18%;"></s:select>
				市
				<s:select list="#{0:'请选择...'}" id="area" name="area" style="width:18%;" ></s:select>
				区
            	  
                  <span class="STYLE6">*</span>
                  <span style="color:red"  id="areaSpan"></span>
                  </td>
                </tr>
                <tr>
 
        <td height="30" align="right">验证码： </td>
        <td>
	          <table border="0" cellspacing="0" cellpadding="0">
	            <tr>
	              <td width="53" valign="middle">
	              	<input name="securityCode" id="securityCode" type="text" size="6" maxlength="4" style="border:1px solid #DBDBDB; height:22px;"/>&nbsp;&nbsp;
	              
	              </td>
	              <td width="53" ><img style="vertical-align: middle;" src="VerifyCodeImg" align="middle" /><!-- VerifyCodeImg名字是web.xml里面配置的验证码类 -->
	              </td>
	              <td ><!--  看不清？<a href="#">换一张</a>-->
	              	   &nbsp;&nbsp;<span style="color:red"  id="codeSpan"></span>
	              </td>
	              <input type="hidden" name="vcode" id="vcode" value="" />
	            </tr>
	          </table>
        </td>
      </tr>
            </table></td>
          </tr>
          <tr>
            <td width="86" height="46" align="right" class="STYLE5">&nbsp;</td>
            <td width="523" align="left">
            <!-- 	<a href="#" onclick="javascript:doUserSubmit();" ></a> -->
            	<img onclick="javascript:doUserSubmit();" src="images/tyxy.jpg" border="0" alt=" 注 册 " style="cursor:hand" width="148" height="24"/>
            	
            </td>
            <td width="40">&nbsp;</td>
        </tr>
      </table>
      <table width="649" height="127" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center"><h2>《客户服务协议》</h2></td>
        </tr>
        <tr>
          <td   height="94"  align="left">
          <div style="overflow: auto;height: 300px;">
          <%=article.getContent() %>
          </div>
</td>
</tr>
      </table>
      <table width="223" height="29" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
        </tr>
      </table>
      </td>
  </tr>
</table>
</form>
<p/><p/><p/>
</body>

</html>
<%-- --底部--%>
<s:action name="showComment" executeResult="true"/>
<%@include file="foot_end.jsp"%>